<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="author" content="彭俊超">
    <title>唯品会</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <!--最上面的导航-->
    <div class="top-nav">
        <div class="container top-container">
            <div class="henan">河南<span class="arrow"></span>
                 <ul class="address">
                    <h2>请选择所在的收获地区</h2>
                    <hr class="dotted">
                    <li>A 安徽 澳门</li>
                    <li>B 北京</li>
                    <li>C 重庆</li>
                    <li>F 福建 佛山</li>
                    <li>H 河南 河北 合肥</li>
                </ul>
            </div>          
            <ul class="top-list">
                <li><a href="#" class="login">请登录</a>&#x3000;<i>/</i>&#x3000;
                    <ul class="address log">
                        <li class="one"><span class="hello"></span><span style="margin-left:15px;">你好！[请登录]</span></li><hr>
                        <li class="two"><span>我的收藏</span><span>我的订单</span></li>
                        <li class="three"><span>零钱</span><span>我的优惠券</span></li>
                        <li class="four"><span>我的唯品币</span><span>唯品金融</span></li>
                    </ul>
                </li>
                <li><a href="#">注册</a>&#x3000;<i>/</i>&#x3000;</li>
                <li class="qiandao"><img src="./img/header_sign.gif" alt=""><a href="#">签到有礼</a>&#x3000;<i>/</i>&#x3000;
                    <ul class="address ">
                        <li><span class="qiandao-inner"></span><span class="hr"><hr></span><span class="qiandao-inner"></span><span class="hr"><hr></span><span class="qiandao-inner"></span><span class="hr"><hr></span><span class="qiandao-inner"></span><span class="hr"><hr></span><span class="qiandao-inner"></span><span class="hr"><hr></span><span class="qiandao-inner"></span><span class="hr"><hr></span><span class="qiandao-inner"></span></li>
                        <li><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span></li>
                        <hr>
                        <li><span>每天签到送惊喜，连续签到更享心动奖励</span><span class="sign">签到</span></li>
                    </ul>
                </li>
                <li><a href="#">我的订单</a>&#x3000;<i>/</i>&#x3000;</li>
                <li class="cell"><a href="#">我的特卖<span class="arrow"></span></a>&#x3000;<i>/</i>&#x3000;
                    <ul class="address">
                        <li><a href="#">品牌收藏(0)</a></li>
                        <li><a href="#">商品收藏(5)</a></li>
                        <li><a href="#">我的足迹(2)</a></li>
                    </ul>
                </li>
                <li class="club"><a href="#">会员俱乐部<span class="arrow"></span></a>&#x3000;<i>/</i>&#x3000;
                    <ul class="address">
                        <li><a href="#">俱乐部首页</a></li>
                        <li><a href="#">唯品币兑换</a></li>
                        <li><a href="#">免费抽大奖</a></li>
                    </ul>
                </li>
                <li class="serve"><a href="#">客户服务<span class="arrow"></span></a>&#x3000;<i>/</i>&#x3000;
                    <ul class="address">
                        <li><a href="#">联系客服</a></li>
                        <li><a href="#">帮助中心</a></li>
                        <li><a href="#">服务中心</a></li>
                        <li><a href="#">知识产权投诉</a></li>
                    </ul>
                </li>
                <li class="phone"><span class="moble"></span><a href="#">手机版</a>&#x3000;<i>/</i>&#x3000;
                    <ul class="address">
                        <li><a href="#"><img src="./img/1466134037230.jpg" alt=""></a></li>
                        <li>随时逛，及时抢</li>
                    </ul>
                </li>
                <li class="more"><a href="#">更多<span class="arrow"></span></a>&#x3000;<i>/</i>&#x3000;
                    <ul class="address">
                        <li>
                            <h5>合作专区</h5>
                            <p><span>联名卡申请</span><span>唯品卡</span><span>支付专区</span></p>
                        </li><br>
                        <div>
                             <h5>关于我们</h5><br>
                            <p><span>sell in vip</span><span>品牌招商</span><span>官方微博</span></p>
                        </div>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    <!--设置logo部分-->
    <div class="logo">
        <div class="container logo-container">
            <div><img src="./img/1496219375910.png" alt=""></div>
            <ul>
                <li><a href="#"><img src="./img/1466131264367.png" alt=""></a></li>
                <li><a href="#"><img src="./img/1466131266290.png" alt=""></a></li>
                <li><a href="#"><img src="./img/1466131268726.png" alt=""></a></li>
                <li class="buy"><a href="#"><span class="shopping"><span class="zero">0</span></span><span>我的购物袋</span></a></li>
            </ul>
        </div>
    </div>
    <!--设置中间的nav-->
    <div class="middle-nav">
        <div class="container">
            <ul>
                <li class="first"><a href="#">首页</a></li>
                <li><a href="#">唯品国际</a></li>
                <li><a href="#">母婴</a></li>
                <li><a href="#">家居家电</a></li>
                <li><a href="#">男士</a></li>
                <li><a href="#">美妆</a></li>
                <li><a href="#">生活超市</a></li>
                <li><a href="#">金融</a></li>
                <li class="last">
                    <a href="#">更多<span class="arrow"></span></a>
                    <ul  class="more">
                                <li><img src="./img/1467620677036.jpg" alt=""><div class="blue"></div><span>女装</span></li>  
                                <li><img src="./img/1467620750077.jpg" alt=""><div class="blue"></div><span>箱包</span></li>  
                                <li><img src="./img/1467620773404.jpg" alt=""><div class="blue"></div><span>配饰</span></li>  
                                <li><img src="./img/1467620790247.jpg" alt=""><div class="blue"></div><span>运动</span></li>  
                                <li><img src="./img/1467620841997.jpg" alt=""><div class="blue"></div><span>维品·奢</span></li>  
                    </ul>
                </li>
            </ul>
            <ul>
                <li class="feilei"><img src="./img/1470377526197.png" alt=""><span>分类</span></li>
                <li class="yugao"><img src="./img/1470377501079.png" alt=""><span>预告</span></li>
            </ul>
        </div>
    </div>
    <!--轮播图部分-->
    <div class="banner">
        <div class="container banner-content">
            <ul class="banner-img">
                <li class="active"><a href="#"><img src="./img/lunbo03.jpg" alt=""></a></li>
                <li><a href="#"><img src="./img/lunbo02.jpg" alt=""></a></li>
                <li><a href="#"><img src="./img/lunbo01.jpg" alt=""></a></li>
                <span class="prev">&lt;</span>
                <span class="next">&gt;</span>
            </ul>
            <ul class="indicator">
                <li class="current"><a href="#">维品专栏&#x3000;买五件送两件</a><span class="bb"></span></li>
                <li><a href="#">净水节&#x3000;最高500元红包</a><span></span></li>
                <li><a href="#">时尚风暴&#x3000;最高满199减40</a><span></span></li>
                <div class="line"></div>
            </ul>
        </div>
    </div>
    <!--下面的图片-->
    <div class="des container">
        <img src="./img/01.jpg" alt="">
        <img src="./img/02.jpg" alt="">
        <img src="./img/03.jpg" alt="">
    </div>
    <div class="aside">
        <div class="zh">
            <ul>
                <li class="tx"><span></span></li>
                <li class="nihao"><span>你好！请</span>&nbsp;<a href="#">登录</a>&#x3000;|&#x3000;<a href="#">注册</a></li>
                <li class="dd">
                    <div>
                        <span></span>
                        <br>
                        <span>我的订单</span>
                    </div>
                    <hr>
                    <div>
                        <span></span>
                        <br>
                        <span>我的消息</span>
                    </div>
                </li>
                <li class="xinxi">
                    <span>会员俱乐部</span>
                </li>
            </ul>
        </div>
        <div class="gw">
            <span></span>
            <span>购物袋</span>
            <span>0</span>
        </div>
        <div class="yhq">
            <span></span>
            <p>我的优惠券</p>
        </div>
        <div class="pinpai">
            <span></span>
            <p>品牌收藏</p>
        </div>
        <div class="spsc">
            <span></span>
            <p>商品收藏</p>
        </div>
        <div class="zj">
            <span></span>
            <p>我的足迹</p>
        </div>
        <div class="hyfk">
            <span></span>
            <p>会员反馈</p>
        </div>
        <div class="back">
            <span></span>
            <p>返回顶部</p>
        </div>
    <script src="js/index.js">
    </script>
</body>

</html>